<template>
	<view class="search">
		<!-- 搜索框 -->
		<view class="search-top">
			<view class="search-top-content">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<input class="search-top-content-input" v-model="text" type="text" placeholder="请输入车辆名称或品牌"
					placeholder-style="font-size: 28rpx;color: #999;" />

			</view>
			<view class="search-top-btn" style="padding-left: 20rpx;" @click="sousuo">搜索</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history" v-if="type1">
			<view class="history-top">
				<text>搜索历史</text>
				<!-- <uni-icons type="trash" size="16" color="#999"></uni-icons> -->
			</view>
			<view class="history-list">
				<text class="history-list-item1" v-for="(item,index) in historyList" :key="index"
					@click="historyTap(item)">{{ item.keyWord }}</text>
			</view>
		</view>
		<!-- 热门 -->
		<view class="history" v-if="type1">
			<view class="history-top">
				<text>热门搜索</text>
			</view>
			<view class="history-list">
				<text class="history-list-item" v-for="(item,index) in hotList" :key="index"
					@click="hotTap(item)">{{ item.key_word }}</text>
			</view>
		</view>

		<u-toast ref="uToast" />
		
		<view v-if="listData.length>=1">
			<view v-for="(item,index) in listData" class="ad" :key='index' @click="liebiao(item)">
				{{item.name}}
			</view>
		</view>
		<null v-else-if='type==true&&listData.length<1'></null>
		<!-- 热门平台 -->
		<!-- 	<view class="hot-platform">
			<view class="hot-platform-top">
				<text>热门平台</text>
			</view>
			<view class="hot-platform-list">
				<view class="list-item">
					<view class="list-item-logo"><image src="../../static/search/hot_1.png" mode="aspectFit"></image></view>
					<view class="list-item-cont">
						全国<text class="num">592</text>辆车在售 <text style="font-size: 18px;vertical-align: middle; margin-top: -1px;" class="iconfont icon-you"></text>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-logo"><image src="../static/search/hot_1.png" mode="aspectFit"></image></view>
					<view class="list-item-cont">
						全国<text class="num">592</text>辆车在售 <text style="font-size: 18px;vertical-align: middle; margin-top: -1px;" class="iconfont icon-you"></text>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-logo"><image src="../static/search/hot_1.png" mode="aspectFit"></image></view>
					<view class="list-item-cont">
						全国<text class="num">592</text>辆车在售 <text style="font-size: 18px;vertical-align: middle; margin-top: -1px;" class="iconfont icon-you"></text>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-logo"><image src="../static/search/hot_1.png" mode="aspectFit"></image></view>
					<view class="list-item-cont">
						全国<text class="num">592</text>辆车在售 <text style="font-size: 18px;vertical-align: middle; margin-top: -1px;" class="iconfont icon-you"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">查看全部热门平台>></view> -->
	</view>
</template>

<script>
	import API from "@/api/morePage.js"
	export default {
		data() {
			return {
				hotList: [],
				historyList: [],
				text: '',
				type1:true,
				type:false,
				listData:[]
			}
		},
		mounted() {
			this.getHotSearch()
			this.getHistorySearch()
		},
		methods: {
			liebiao(item){
				uni.navigateTo({
					url:'/pagesA/buyCar/buyCar?brandId='+item.brandId+'&name='+item.name+'&seriesId='+item.seriesId
				})
			},
			sousuo() {
				if (this.text == '') {
					this.$refs.uToast.show({
						title: '请先输入关键字',
						type: 'error',

					})
					return false
				}
				API.globalSearch({
					keyWord: this.text
				}).then(res => {
					this.type = true
					this.type1 = false
					this.listData = res.data
					console.log(res)
				})
			},
			hotTap(item) {
				console.log(item)
				this.text = item.key_word
			},
			historyTap(item) {
				console.log(item)
				this.text = item.keyWord
			},
			getHotSearch() {
				API.getHotSearch({}).then(res => {
					this.hotList = res.data
				})
			},
			getHistorySearch() {
				API.getHistorySearch({}).then(res => {
					this.historyList = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ad{
		margin: 32rpx;
		padding: 32rpx;
		border-bottom: 1px solid #d8d8d8;
	}
	.search {
		background-color: $uni-bg-color;
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		min-height: 100vh;

		.search-top {
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx $uni-widthspace;
			box-sizing: border-box;

			.search-top-content {
				flex: 1;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 16rpx $uni-widthspace;
				box-sizing: border-box;
				background-color: #f5f5f5;
				border-radius: 60rpx;

				.search-top-content-input {
					font-size: 28rpx;
					color: #333;
					margin-left: 21rpx;
				}
			}

			.search-top-btn {
				text-align: center;
				margin-left: $uni-widthspace;
				font-size: 28rpx;
				color: #666;
			}
		}

		.history {
			padding: 30rpx $uni-widthspace;

			.history-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
					font-weight: bolder;
				}
			}

			.history-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.history-list-item {
					padding: 13rpx 20rpx;
					box-sizing: border-box;
					color: #999;
					font-size: 24rpx;
					background-color: #ececec;
					margin-top: 30rpx;
					margin-right: 30rpx;
					background: #FFF2F1;
					border-radius: 30rpx;
					color: #2C2C2C;
				}

				.history-list-item1 {
					padding: 13rpx 20rpx;
					box-sizing: border-box;
					color: #999;
					font-size: 24rpx;
					background-color: #F4F6F8;
					;
					margin-top: 30rpx;
					margin-right: 30rpx;
					background: #FFF2F1;
					border-radius: 30rpx;
					color: #2C2C2C;
				}
			}
		}

		.hot-platform {
			padding: 30rpx $uni-widthspace;

			.hot-platform-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
					font-weight: bolder;
				}
			}

			.hot-platform-list {
				.list-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: $uni-widthspace 0px 0px;
					box-sizing: border-box;
					border-bottom: 2rpx solid #d6d6d6;

					&:last-of-type {
						border-bottom: 0;
					}

					.list-item-logo {
						width: 240rpx;
						height: 120rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.list-item-cont {
						font-size: 28rpx;
						color: #333;
						display: flex;
						align-items: center;
						line-height: 40rpx;

						.num {
							color: #002B56;
						}
					}
				}
			}
		}

		.footer {
			margin: 30rpx 5% 0rpx;
			width: 90%;
			line-height: 92rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			border-radius: 10rpx;
			background-color: #002B56;
		}
	}
</style>
